<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/qrcode.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <script th:src="@{/js/axios.js}"></script>
    <style>
        *{
            margin:0px;
            padding: 0px;
        }
        a{
          color:black;
          text-decoration: none;
        }
        span:hover{
            color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="uploadVideo">
        <form th:action="@{/video/aliyunVod/uploadVideo}" method="post" enctype="multipart/form-data">
            <input type="file" required name="file">
            <input type="submit" value="开始上传" >
        </form>
    </div>
    <div id="videoList">
        <p v-for="video in videoList">
            <span style="cursor: pointer" @click="play(video.videoId)">{{video.name}}</span>
        </p>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            videoList:[],
        },
        methods:{
            play(videoId){
            window.location.href='/video/aliyunVod/videoPlay?vid='+videoId;
            }
        },
        mounted(){
            axios.get("/video/aliyunVod/videoList").then(response => {
                var obj =  response.data;
                console.log(obj);
                if(obj.length>0){
                    for (let i = 0; i <obj.length ; i++) {
                        this.videoList.push(obj[i]);
                    }
                }
            }).catch(function(error){
                alert(error);
            })
        },
    })
</script>
</html>